<template>
  <div class="indexContentContainer">
    <div class="menu">
      <div class="menuTopTitle">
        <img :src="menuTitleIcon" class="icon" />
        <span class="title">简历目录</span>
      </div>
      <el-menu :default-active="defaultActive" :default-openeds="openeds" @select="handleSelect" :collapse="false">
        <el-menu-item v-for="item in menuList" :index="item.value" :key="item.value">{{ item.title }}</el-menu-item>
      </el-menu>
    </div>
    <div class="content">
      <div class="resumeContainer">
        <div class="resumeTitle">
          <div id="titleName">我的在线简历</div>
          <div class="resumeContentBtn" @click="handleUploadResume">
            <img :src="uploadFile" class="icon" />
            <span>导入附件简历</span>
          </div>
          <div class="resumeContentBtn" @click="handleShowResumeList">
            <img :src="uploadFile" class="icon" />
            <span>附件简历解析成在线简历</span>
          </div>
        </div>
        <div class="resumeContent" v-loading="loading">
          <div class="resumeItem" :id="resumeItem.prop" v-for="(resumeItem, index) in resumeList" :key="index">
            <component :is="resumeItem.prop" :key="index" :resumeData="resumeData[resumeItem.prop]"
              @reqGetResumeData="reqGetResumeData" :editStatus.sync="resumeItem.editStatus" :resumeList="resumeList"
              @reqGetIntenedInfo="reqGetIntenedInfo">
            </component>
          </div>
        </div>
      </div>
      <div class="resumeSide">
        <attachmentResume @reqGetResumeData="reqGetResumeData"></attachmentResume>
      </div>
    </div>
    <resumeListDialog :visible.sync="visibleResumeList" @reqGetResumeData="reqGetResumeData"></resumeListDialog>
  </div>
</template>

<script>
import { throttle } from "lodash";
import { resumeGetPreview, resumeGeneralInterface } from "@/api/job-detail.js";
import uploadFile from "@/assets/images/png/uploadFile.png";
import menuTitleIcon from "@/assets/images/png/menuTitleIcon.png";
export default {
  name: "MyResume",
  components: {
    basicInfo: () => import("./basicInfo/index.vue"),
    intendedInfo: () => import("./intendedInfo/index.vue"),
    aimInfo: () => import("./aimInfo/index.vue"),
    educationInfo: () => import("./educationInfo/index.vue"),
    selfDescription: () => import("./selfDescription/index.vue"),
    projectInfo: () => import("./projectInfo/index.vue"),
    campusExperienceInfo: () => import("./campusExperienceInfo/index.vue"),
    trainInfo: () => import("./trainInfo/index.vue"),
    skillInfo: () => import("./skillInfo/index.vue"),
    awardInfo: () => import("./awardInfo/index.vue"),
    certificateInfo: () => import("./certificateInfo/index.vue"),
    workInfo: () => import("./workInfo/index.vue"),
    attachmentResume: () => import("./attachmentResume/index.vue"),
    resumeListDialog: () => import("./resumeListDialog/index.vue"),
  },
  props: {
    openUpload: {
      type: [String, Boolean],
      default: "false",
    },
  },
  computed: {
    loading() {
      return this.$store.state.myResume.loading;
    },
  },
  created() {
    this.reqGetResumeData();
  },
  mounted() {},
  beforeDestroy() {
    const resumeContainerDom = document.querySelector(".resumeContainer");
    resumeContainerDom &&
      resumeContainerDom.removeEventListener("scroll", this.onScroll);
  },
  data() {
    const resumeList = [
      {
        title: "基本信息",
        prop: "basicInfo",
        editStatus: false,
      },
      {
        title: "求职状态",
        prop: "intendedInfo",
        editStatus: false,
      },
      {
        title: "求职意向",
        prop: "aimInfo",
        editStatus: false,
      },
      {
        title: "教育背景",
        prop: "educationInfo",
        editStatus: false,
      },
      {
        title: "自我评价",
        prop: "selfDescription",
        editStatus: false,
      },
      {
        title: "个人工作经历",
        prop: "workInfo",
        editStatus: false,
      },
      {
        title: "个人项目经验",
        prop: "projectInfo",
        editStatus: false,
      },
      {
        title: "校园经历",
        prop: "campusExperienceInfo",
        editStatus: false,
      },
      {
        title: "培训经历",
        prop: "trainInfo",
        editStatus: false,
      },
      {
        title: "技能特长",
        prop: "skillInfo",
        editStatus: false,
      },
      {
        title: "奖项荣誉",
        prop: "awardInfo",
        editStatus: false,
      },
      {
        title: "个人证书",
        prop: "certificateInfo",
        editStatus: false,
      },
    ];
    return {
      resumeItemDOMList: "",
      uploadFile,
      menuTitleIcon,
      resumeList, //表单列表
      resumeData: {
        basicInfo: {}, //基本信息
        intendedInfo: {}, //求职状态
        aimInfo: [], //求职意向
        educationInfo: [], //教育背景
        selfDescription: "", //自我评价
        projectInfo: [], //个人项目经历
        campusExperienceInfo: [], //校园经历
        trainInfo: [], //培训经历
        skillInfo: "", //技能特长
        awardInfo: [], //奖项荣誉
        certificateInfo: [], //个人证书
        workInfo: [], //个人工作经历
      },
      visibleResumeList: false,
      // 以下是菜单相关
      currentTab: "1",
      currentFatherTab: "1",
      defaultActive: "1",
      openeds: ["1"],
      menuList: [
        { title: "基本信息", value: "1" },
        { title: "求职状态", value: "2" },
        { title: "求职意向", value: "3" },
        { title: "教育背景", value: "4" },
        { title: "自我评价", value: "5" },
        { title: "工作经历", value: "6" },
        { title: "项目经验", value: "7" },
        { title: "校园经历", value: "8" },
        { title: "培训经历", value: "9" },
        { title: "技能特长", value: "10" },
        { title: "奖项荣誉", value: "11" },
        { title: "个人证书", value: "12" },
      ],
      menuIconList: [
        require("../../../assets/detail/menuIcon/train@2x.png"),
        require("../../../assets/detail/menuIcon/trainSelected@2x.png"),
        require("../../../assets/detail/menuIcon/sal@2x.png"),
        require("../../../assets/detail/menuIcon/salSelected@2x.png"),
        require("../../../assets/detail/menuIcon/recruit@2x.png"),
        require("../../../assets/detail/menuIcon/recruitSelected@2x.png"),
        require("../../../assets/detail/menuIcon/position@2x.png"),
        require("../../../assets/detail/menuIcon/positionSelected@2x.png"),
      ],
      menuIconActiveParams: {
        1: require("../../../assets/detail/menuIcon/trainSelected@2x.png"),
        41: require("../../../assets/detail/menuIcon/salSelected@2x.png"),
        74: require("../../../assets/detail/menuIcon/recruitSelected@2x.png"),
        34: require("../../../assets/detail/menuIcon/positionSelected@2x.png"),
      },
      menuIconNormalParams: {
        1: require("../../../assets/detail/menuIcon/train@2x.png"),
        41: require("../../../assets/detail/menuIcon/sal@2x.png"),
        74: require("../../../assets/detail/menuIcon/recruit@2x.png"),
        34: require("../../../assets/detail/menuIcon/position@2x.png"),
      },
    };
  },
  methods: {
    onScroll(e) {
      if (this.currentTab != 1) {
        var prevItemHeight =
          this.resumeItemDOMList[this.currentTab - 2].getBoundingClientRect()
            .top - 215;
      }
      const nowItemHeight =
        this.resumeItemDOMList[this.currentTab - 1].getBoundingClientRect()
          .top - 215;
      if (nowItemHeight < 0) {
        this.currentTab = +this.currentTab + 1;
        this.defaultActive = this.currentTab + "";
      }
      if (prevItemHeight > 0) {
        this.currentTab = +this.currentTab - 1;
        this.defaultActive = this.currentTab + "";
      }
    },
    handleUploadResume() {
      this.$bus.$emit("uploadResume");
    },
    handleShowResumeList() {
      this.visibleResumeList = true;
    },
    //获取求职状态和求职意向
    reqGetIntenedInfo() {
      const params = {
        op: "person_intended_industry_busi",
        func: "getMyIntendedTradeList",
        version: "v7.8.5",
        forName: "iphone",
        param: {
          person_id: localStorage.getItem("personId"),
        },
      };
      resumeGeneralInterface(params)
        .then((res) => {
          if (res.code == 200) {
            //console.log("resumeGeneralInterface", res.data);
            this.resumeData.intendedInfo = res.data;
            this.resumeData.aimInfo = res.data.myTended;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    handleSelect(values) {
      this.currentTab = values;

      //弥补一些距离
      let distance = 100;
      if (values == 1) {
        distance = 200;
      }
      const container = document.querySelector(".resumeContainer");
      if (this.resumeList[values - 1]) {
        const elementId = this.resumeList[values - 1].prop;
        //获取元素距离滚动容器顶部的距离
        const elementTop =
          container.querySelector(`#${elementId}`).offsetTop - distance;
        //滚动到元素位置
        container.scrollTo({ top: elementTop, behavior: "smooth" });
      }
    },
    reqGetResumeData() {
      this.$store.dispatch("myResume/changeSetting", {
        key: "loading",
        value: true,
      });
      const params = {
        personId: localStorage.getItem("personId"),
      };
      resumeGetPreview(params)
        .then((res) => {
          if (res.code == 200) {
            const data = res.data;
            this.handleData(data);
          } else {
            this.$message.error(res.status_desc || "获取简历失败");
          }
        })
        .catch((e) => {
          this.$message.error(res.status_desc || "获取简历失败");
          console.log(e);
        })
        .finally(() => {
          this.$store.dispatch("myResume/changeSetting", {
            key: "loading",
            value: false,
          });
        });
    },
    //由于后端返回的数据格式很乱，所以需要自己组装
    handleData(data) {
      this.resumeData.basicInfo = {
        iname: data.Iname_p, //姓名
        gznum: data.Gznum_p, //工作年限
        sex: data.Sex_p, //性别
        Hka_p: data.Hka_p, //籍贯地区1,文字描述
        Hkb_p: data.Hkb_p, //现居地地区2,文字描述
        rctypeId: data.rctypeId, //职场身份 1:社会人才 0:学生
        src_p:
          data.src_p ||
          "https://img3.job1001.com/data_center/images/resume/default_man_blue.png", //头像
        Shouji_p: data.Shouji_p, //手机号
        Email_p: data.Email_p, //邮箱
        wechat: data.wechat, //微信号
        JobType_p: data.JobType_p, //职位类型
        Nianling_p: data.Nianling_p, //年龄
        Edu_p: data.Edu_p, //学历,文字描述
        Bday_p: data.Bday_p, //生日
        start_workdate: data.start_workdate, //开始工作时间
        person_info: data.person_info, //个人信息，参数形式
      };
      //求职状态，从别的接口获取，展示用的文字还需要从resumeData.js里获取
      this.reqGetIntenedInfo();
      // this.resumeData.intendedInfo = data.status;
      //求职意向，可以从别的接口获取
      this.resumeData.aimInfo = data.myTended;
      //工作经历
      this.resumeData.workInfo = data.personWorkArr;
      //教育背景
      this.resumeData.educationInfo = data.personEdusArr;
      //项目经验
      this.resumeData.projectInfo = data.work_projectArr;
      //自我评价
      this.resumeData.selfDescription = data.Grzz;
      //技能特长
      this.resumeData.skillInfo = data.otherTc;
      //培训经历
      this.resumeData.trainInfo = data.trainArr;
      //校园经历
      this.resumeData.campusExperienceInfo = data.studentLeaderArr;
      //奖项荣誉
      this.resumeData.awardInfo = data.awardArr;
      //个人证书
      this.resumeData.certificateInfo = data.personCerArr;
      //拼完之后要触发绑定滚动事件
      if (!this.resumeItemDOMList) {
        setTimeout(() => {
          this.resumeItemDOMList =
            document.querySelectorAll(".resumeItemTitle");
          document
            .querySelector(".resumeContainer")
            .addEventListener("scroll", throttle(this.onScroll, 300));
          console.log("this.resumeItemDOMList", this.resumeItemDOMList);
        }, 1000);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// tips:有一些每个子组件都会用到的样式，在底部写了穿透
//先写出来后面再合并
.resumeContainer {
  position: relative;
  padding: 21px 18px;
  flex: 1;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #cbdcfe;
  overflow: scroll;
  padding-bottom: 150px;
  min-width: 910px;
  height: calc(100vh - 150px);
  .resumeTitle {
    margin-bottom: 15px;
    display: flex;
    #titleName {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 20px;
      color: #333333;
      line-height: 20px;
      text-align: left;
      font-style: normal;
      margin-right: 36px;
    }
    .resumeContentBtn {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 15px;
      color: #4880ff;
      line-height: 22px;
      text-align: left;
      font-style: normal;
      margin-right: 32px;
      cursor: pointer;
      display: flex;
      align-items: center;
      .icon {
        width: 16px;
        height: 16px;
        margin-right: 6px;
      }
    }
  }
  .resumeContent {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    overflow-x: hidden;
  }
}
.resumeSide {
  width: 264px;
  height: 81.3vh;
  background: #ffffff;
  border-radius: 8px;
  margin-left: 14px;
}
.indexContentContainer {
  display: flex;
  margin-top: 14px;
  margin-right: 14px;
  width: 100%;
  .menu {
    width: 173px;
    margin-right: 14px;
    border-radius: 8px 8px 0 0;
    height: 100%;
    flex-shrink: 0;
    background-color: white;
    .menuTopTitle {
      padding: 11px 0 8px 20px;
      display: flex;
      align-items: center;
      width: 173px;
      height: 41px;
      background: linear-gradient(
        169deg,
        #e7fff5 0%,
        rgba(255, 255, 255, 0) 73%
      );
      border-radius: 8px;
      .icon {
        width: 22px;
        height: 22px;
        margin-right: 8px;
      }
      .title {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 16px;
        color: #333333;
      }
    }
  }
  .content {
    display: flex;
    min-width: 900px;
    flex: 1;
    border-radius: 10px 10px 0 0;
    align-items: flex-start;
    flex-wrap: nowrap;
  }
}
::v-deep .el-menu {
  width: 175px;
  border-right: 0px;
  background: #ffffff !important;
}
::v-deep .el-menu-item {
  padding-left: 51px !important;
  padding: 0;
  min-width: 145px;
  height: 41px;
  line-height: 41px;
  color: #999999;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
}
::v-deep .el-submenu__title {
  height: 41px;
  font-size: 16px;
  line-height: 41px;
  padding-left: 16px !important;
  color: #999999;
  background: #fff;
  // overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
::v-deep .el-menu-item.is-active {
  color: #0b6eff;
}
::v-deep .el-submenu.is-active > .el-submenu__title {
  color: #fff;
  padding-left: 9px !important;
  margin-left: 12px;
  background: #0b6eff;
  border-radius: 8px;
  &::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 41px;
    background: #0b6eff;
    position: absolute;
    left: -12px;
    border-radius: 8px;
  }
  .el-icon-arrow-down:before {
    color: #fff;
  }
}
::v-deep .el-menu-item:hover,
.el-menu-item:focus {
  background: #f5f5f5;
}
.menuIcon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  margin-bottom: 3px;
  line-height: 16px;
}

::-webkit-scrollbar {
  width: 4px;
  background-color: #fff;
  border-radius: 4px;

  height: 4px;
}
::-webkit-scrollbar-thumb {
  background-color: #d8d8d8;
  border-radius: 4px;
}
::v-deep .displayInfo span {
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
::v-deep .summaryContainer {
  .richContent {
    transition: all 0.3s ease;
    max-height: 83px;
    overflow: hidden;
    white-space: pre-wrap;
    &.expand {
      max-height: none;
      & + .expendContainer {
        bottom: -6px;
        background-color: transparent;
        &::before {
          display: none;
        }
        &::after {
          display: none;
        }
      }
    }
  }
  .expendContainer {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    background-color: white;
    cursor: pointer;
    &::before {
      position: absolute;
      top: -60px;
      left: 0;
      content: "";
      width: 100%;
      //从底部白色到顶部透明渐变，高度为100%
      height: 60px;
      background: linear-gradient(to top, #fff, transparent);
    }
    &::after {
      position: absolute;
      bottom: -16px;
      left: 0;
      content: "";
      width: 100%;
      height: 16px;
      background: white;
    }
  }
}
::v-deep .resumeItemDisplayItem:hover {
  //如果你有更好的方法，欢迎修改
  .expendContainer {
    width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    padding-left: 16px !important;
  }
}
::v-deep .el-date-editor .el-range-input {
  background-color: transparent !important;
}
::v-deep .el-button--text {
  padding: 0;
}
//子元素都会带的一些样式，在这里统一写穿透
::v-deep .displayBlock,
::v-deep .resumeItemTitle {
  padding-left: 16px;
}
::v-deep .editTitle {
  font-family: PingFang-SC, PingFang-SC;
  font-weight: bold;
  font-size: 18px;
  color: #333333;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  margin-bottom: 19px;
}
::v-deep .el-range-separator {
  display: inline-flex;
  align-items: center;
}
</style>
